<template>
	<div class="view-link">
		<Dialog @close="close" :dialogISshow="viewLinksIsShow.state" title="新建奖品" width="70%" :footerIsShow="false">
			<ul class="link-list">
				<li v-for="(item,index) in  linkList" :key="item+index">
					<!-- <div :ref="`link${index}`" :class="`link${index}`">asdfasdfasd</div>
					 -->
					<span v-text="item.name">ch1</span>
					<el-input :value="item.url" :class="`link${index}`" :readonly="true">
					</el-input>
					<el-button type="primary" icon="el-icon-printer" @click="copy(`link${index}`)"></el-button>
				</li>
			</ul>
		</Dialog>
	</div>
</template>
<script>
export default {
	props: {
		activeId: {
			type: Number,
			default: null,
		},
		viewLinksIsShow: {
			type: Object,
			default() {
				return {
					state: false,
				};
			},
		},
	},
	data() {
		return {
			linkList: [1],
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			if (!this.activeId) {
				log.warn('活动id不能为空');
				return;
			}
			this.$http('/admin/active/getActiveLink', {
				activeId: this.activeId,
			}).then(res => {
				this.linkList = res.data;
			});
		},
		close() {
			this.viewLinksIsShow.state = false;
		},
		copy(name) {
			// let urlDom = this.$refs.linkx;
			// console.log(urlDom,)
			try {
				let urlDom = document.querySelector(`.link-list .${name} input`).select();
				document.execCommand('Copy');
				log.ok('复制成功');
			} catch (error) {
				console.log(error);
				log.info('复制失败');
			}

			// document.execCommand("Copy");
			// console.log('%c gc_urlDom=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', urlDom,name);

			// setTimeout(() => {

			//
			// }, 1000);
		},
	},
};
</script>
style.<style lang="scss">
.view-link {
	.link-list {
		margin: 0;
		padding: 0;
		list-style: none;
		> li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			> button {
				width: 100px;
			}
			> span {
				color: #cccc;
			}
			> div {
				flex: 1;
				input {
					border: none;
				}
			}
		}
	}
}
</style>

